<template>
    <div class="fabric-desgin-wrap">
        <div class="fabric-desgin__header bt-line">
            <FileOperate></FileOperate>
            <div class="header__tool">
                <UnReDo></UnReDo>
                <ClearIcon></ClearIcon>
                <!-- <ToolsIcon></ToolsIcon> -->
            </div>
            <div class="tooptip-text">
                <n-tag type="warning">
                    注意：画[自由折线|直线]或[不规则形状]时，双击结束绘制</n-tag>
                <span class="text"></span>
            </div>
        </div>
        <div class="fabric-desgin__body">
            <div class="fabric-desgin__nav no-select">
                <n-tabs 
                    :bar-width="28" 
                    type="bar"
                    size="small" 
                    class="custom-n-tabs" 
                    animated
                    placement="left">
                    <n-tab-pane name="oasis" tab="基本图形">
                        <ToolsIcon></ToolsIcon>
                    </n-tab-pane>
                    <n-tab-pane name="text" tab="文字">
                        <TextIcon></TextIcon>
                    </n-tab-pane>
                    <n-tab-pane name="the beatles" tab="素材库">
                        素材库
                    </n-tab-pane>
                    <n-tab-pane name="jay chou" tab="模板库">
                        模板库
                    </n-tab-pane>
                </n-tabs>
            </div>
            <div ref="fabricDesginRef" id="workspace" class="fabric-desgin__content">
                <canvas class="canvas" id="canvas"></canvas>
            </div>
            <div class="fabric-desgin__action">
                <!-- 画板属性 -->
                <ArtboardAttribute></ArtboardAttribute>
                <h2 class="action__title no-select m-b bold">图层属性{{ mixinState.mSelectMode }}</h2>
                <!-- v-show会导致组件内部事件监听报错 -->
                <div v-if="mixinState.mSelectMode === 'multiple'">
                    <Group></Group>
                    <Alignment></Alignment>
                    <BorderMode></BorderMode>
                </div>
                <div v-if="mixinState.mSelectMode === 'one'">
                    <FontAttribute></FontAttribute>
                    <Alignment></Alignment>
                    <BorderMode></BorderMode>
                    <ImageAttribute></ImageAttribute>
                    <FlipMode></FlipMode>
                    <OpacityAttribute></OpacityAttribute>
                </div>
                <!-- 路径组件，用于画笔属性设置 -->
                <PathAttribute></PathAttribute>
                <!-- 通用颜色选择器 -->
                <ColorPicker></ColorPicker>
            </div>
        </div>
    </div>
</template>

<script setup>
// v5 版本，v6还在开发中
import { fabric } from "fabric"
import { useResizeObserver } from '@vueuse/core'
// fabric-history 必须导入在fabric的下方，否则报错找不到fabric模块，
// 这个库撤回|重做api会自己重新渲染画布，不用重复调用
// import "fabric-history";

// 顶部工具组件
import FileOperate from './components/FileOperate.vue'
import ClearIcon from './components/ClearIcon.vue'
import UnReDo from './components/UnReDo.vue'

// 左侧工具组件
import TextIcon from './components/TextIcon.vue'
import ToolsIcon from './components/ToolsIcon.vue'

// 右侧工具组件
import FontAttribute from './components/FontAttribute.vue'
import ColorPicker from './components/ColorPicker.vue'
import Alignment from './components/Alignment.vue'
import FlipMode from './components/FlipMode.vue'
import BorderMode from './components/BorderMode.vue'
import ImageAttribute from './components/ImageAttribute.vue'
import PathAttribute from './components/PathAttribute.vue'
import Group from "./components/Group.vue"
import ArtboardAttribute from "./components/ArtboardAttribute.vue"
import OpacityAttribute from './components/OpacityAttribute.vue'

// hooks
import { useNaiveDiscrete } from "@/hooks/navie-ui"
import useSelectListen from '@/hooks/useSelectListen'

// 插件
import CoverEditor from "./core/CoverEditor"
import HistoryPlugin from './plugins/HistoryPlugin'
import ActiveControlPlugin from './plugins/ActiveControlPlugin'
import CopyPlugin from './plugins/CopyPlugin'
import MoveZoomPlugin from './plugins/MoveZoomPlugin'
import DrawingPlugin from './plugins/DrawingPlugin'
import AttributesPlugin from './plugins/AttributesPlugin'
import GroupTextPlugin from './plugins/GroupTextPlugin'
import GroupPlugin from './plugins/GroupPlugin'
import WorkspacePlugin from './plugins/WorkspacePlugin'

const coverEditor = new CoverEditor()
const { mixinState } = useSelectListen(coverEditor)
const { message } = useNaiveDiscrete()
const fabricDesginRef = ref(null);

// 容器发生改变后，重新计算画布大小
useResizeObserver(fabricDesginRef, (entries) => {
    const entry = entries[0]
    const { width, height } = entry.contentRect
    // console.log(`width: ${width}, height: ${height}`, 7777);
})

onMounted(() => {
    // 交给插件来做
    const { left, top, width, height } = fabricDesginRef.value.getBoundingClientRect();
    const canvas = new fabric.Canvas("canvas", {
        // width,
        // height,
        fireRightClick: true, // 启用右键，button的数字为3
        stopContextMenu: true, // 禁止默认右键菜单
        controlsAboveOverlay: true, // 超出clipPath后仍然展示控制条
        // imageSmoothingEnabled: false, // 解决文字导出后不清晰问题,开启此属性，画笔功能受影响，会出现轻微移动现象
        preserveObjectStacking: true, // 当选择画布中的对象时，让对象不在顶层。
    });

    const image = new fabric.Image.fromURL('https://c.pxhere.com/photos/d8/84/bike_bicycle_basket_street_blue-121797.jpg!d', function(oImg) {
        oImg.scale(0.3).set({
            top:200,
            left:260,
            angle: 0,
            // clipPath: new fabric.Circle({
            //     radius: 300,
            //     originX: 'center',
            //     originY: 'center'
            // })
        });
        // oImg.scaleToWidth(300);
        // canvas.add(oImg).setActiveObject(oImg);
        
        coverEditor.canvas.add(oImg)
    });
    
    // 初始化编辑器
    coverEditor.init(canvas)
    coverEditor.use(HistoryPlugin)
    coverEditor.use(CopyPlugin)
    coverEditor.use(ActiveControlPlugin)
    coverEditor.use(MoveZoomPlugin)
    coverEditor.use(DrawingPlugin)
    coverEditor.use(AttributesPlugin)
    coverEditor.use(GroupTextPlugin)
    coverEditor.use(GroupPlugin)
    coverEditor.use(WorkspacePlugin)

    // 调用注册钩子
    // coverEditor.hooksEntity.hookImportAfter.callAsync('55555', () => {
    //     console.log('hookImportAfter');
    // })
    console.log(coverEditor, 'coverEditor');
    // coverEditor.canvas.on('object:modified', getObjectAttr);
});

// function getObjectAttr(params) {
//     console.log(76767);
// }

provide('coverEditor', coverEditor)
provide('fabric', fabric)
provide('mixinState', mixinState)

onBeforeUnmount(() => {
    coverEditor.destory()
})

// window.addEventListener('resize', evt => {
//     const { left, top, width, height } = fabricDesginRef.value.getBoundingClientRect();
//     console.log(width, height, 2222);
// })
</script>

<style lang="scss" src="./style.scss"></style>
